<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
</head>
<body>
    <div id="app" style="color: aqua; font-size: 16px;">
        <span style="color: #999; font-size: 20px;">{{title}}</span>
        我出现了 {{ infos.date }}
    </div>
    <script src="./dist/umd/vue.js"></script>
    <script>
        const vm = new Vue({
            // template: `<div id=app style="color: aqua; font-size: 16px;">
            //     <span style="color: #999; font-size: 20px;">{{title}}</span>
            //     我出现了 {{ infos.date }}
            // </div>`,
            el: '#app',
            data() {
                return {
                    title: 'askform',
                    staffs: ['张三', '李四', '王五'],
                    infos: {
                        date: '十二月二十',
                        position: '华盛达广场',
                        main: {
                            name: '张三'
                        },
                        weekend: [6, 7]
                    },
                    staffsInfo: [
                        {
                            name: '张三',
                            age: 20,
                        },
                        {
                            name: '李四',
                            age: 21,
                        },
                        {
                            name: '王五',
                            age: 22,
                        }
                    ]
                }
            }
        })
        // vm.staffsInfo.push({
        //     name: '赵六',
        //     age: 23,
        // });
        // console.log(vm.staffsInfo);

        // vue.$watch('title', function (oldValue, newValue) {
        //     console.log(oldValue, newValue);
        // })
        // vue.title = '明天';
        // vue.title = '明天455';
    </script>
</body>
</html>